<template>
  <div class="office-box">
    <DocumentEditor
      id="docEditor"
      class="docEditor"
      ref="docEditor"
      :documentServerUrl="serviceUrl"
      :config="config"
      :events_onDocumentReady="onDocumentReady"
      :events_onDocumentStateChange="onDocumentStateChange"
    />
  </div>
</template>

<script setup>
  import { ref, onMounted, reactive, watch, nextTick } from 'vue';
  import { DocumentEditor } from '@onlyoffice/document-editor-vue';
//   import { useReportApi } from '@/api/report';
//   import { Storage } from '@/utils/storage';

  // 导入静态html文件
  const docEditor = ref(null);

//   const reportApi = useReportApi();
  const props = defineProps(['flag', 'filePath', 'display']);
  const emit = defineEmits(['toIndex']);

  const config = reactive({
    // 编辑器类型，支持 word（文档）、cell（表格）、slide（PPT）
    documentType: 'word',

    // 文档配置
    document: {
      // 文件类型
      fileType: 'docx',
      // 文档标识符
      key: '',
      url: '/api/genreports/download?fileName=sample.docx&userAddress=test',
      // 文档标题
      title: 'sample.docx',
    },
    customization: {
      autosave: false,
      chat: false,
      comments: false,
      help: false,
      plugins: false,
    },

    editorConfig: {
      lang: 'zh-CN',
      user: {
        group: '技术部',
        id: 'test',
        name: 'test',
      },
      mode: '',
      callbackurl:
        '/api/genreports/track?filename=sample.docx&userAddress=test',
      customization: {
        mode: 'view',
      },
      layout: {
        leftMenu: {
          mode: false,
        },
      },
    },
  });

  watch(
    () => props.flag,
    (newVal) => {
      getEdit(newVal);
    },
  );
  watch(
    () => props.filePath,
    (newVal) => {
      getEdit(props.flag);
    },
  );

  const onDocumentReady = (a) => {
    // console.log("Document is loaded", a);
  };
  const onDocumentStateChange = (a) => {
    // console.log('change', a);
  };

  const serviceUrl = window.$baseUrl.reportUrl + ':6833';
  const getEdit = async (val) => {
    // const token = Storage.get().token;
    // const data = await reportApi.getEditInfo2({
    //   filepath: props.filePath,
    //   mode: val,
    //   type: 'desktop',
    // });
    // if (data.code  === -403) {
    //   const res = await reportApi.login({
    //     username:'admin',
    //     pwd:'123456',
    //     tenantId:1,
    //   });
    //   Storage.set(JSON.stringify(res));
    //   nextTick(()=>{
    //     getEdit(props.flag)
    //   })
    //   return 
    // }
    // data.document.url =
    //   window.$baseUrl.reportUrl +
    //   ':10010/genreports' +
    //   data.document.url +
    //   '&token=' +
    //   token;
    // data.editorConfig.callbackUrl =
    //   window.$baseUrl.reportUrl +
    //   ':10010/genreports' +
    //   data.editorConfig.callbackUrl +
    //   '&token=' +
    //   token;
    // data.editorConfig.customization.compactToolbar = true;
    // Object.assign(config, data);
  };

  onMounted(() => {
    if (props.flag === 'view') getEdit('view');
    else getEdit('edit');
  });
</script>

<style lang="scss" scoped>
  // 引入外部样式
  @import '@/theme/office.scss';
</style>
<style lang="scss">
  .docEditor {
    ::v-deep .layout-item .hint-section {
      display: none;
    }
  }
</style>
